<template>
  <div class="wrap">
    <cropper @success="uploadImg" :size="200">
      <div class="upload-wrap">
        <img class="upload" :src="imgSrc" alt="默认图" />
      </div>
    </cropper>
    <Button
      round
      class="btn"
      type="info"
      @click="$router.push({ name: 'home' })"
      loading-text="加载中..."
      block
      >返回</Button
    >
  </div>
</template>

<script>
import cropper from "_c/cropperH5";
import apiList from "_api";
import axios from "axios";
import { Button } from "vant";
export default {
  data() {
    return {
      apiList,
      imgSrc: require("../../../assets/images/u=329429787,4292897941&fm=253&fmt=auto&app=138&f=JPEG.webp"),
    };
  },
  name: "vCropper",
  components: { cropper, Button },
  methods: {
    uploadImg(data) {
      axios.defaults.encrypt = false;
      let formData = new FormData();

      formData.append("credentialImg", "test", "DX.jpg");
      this.$api({
        headers: {
          "Content-type": "multipart/form-data",
        },
        key: "identification",
        data: formData,
        method: "post",
      }).then(() => {
        this.$toast.success("上传成功！");
        this.imgSrc = `data:image/jpeg;base64,${data}`;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  padding: 30px;
}
.upload {
  width: 100%;
  display: block;
  border: dotted 1px #ccc;
  border-radius: 4px;
}
.upload-wrap {
  height: 280px;
  padding: 30px;
  border: 2px solid #ccc;
  img {
    object-fit: contain;
    height: 270px;
  }
}
.btn {
  margin-top: 150px;
}
</style>
